<template>
  <div class="train">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      ref="TrainRule"
      :rules="rules"
    >
      <el-form-item label="车站名" prop="trainId">
        <el-input v-model="formInline.trainId" placeholder="火车ID"></el-input>
      </el-form-item>
      <el-form-item label="车站状态">
        <el-select v-model="formInline.trainStatus" placeholder="活动区域" @change="onStatusChange">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('TrainRule')">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="create">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="trainId" label="火车ID" width="150"></el-table-column>
      <el-table-column prop="trainType" label="火车类型" width="120"></el-table-column>
      <el-table-column prop="start" label="始发站" width="120"></el-table-column>
      <el-table-column prop="end" label="终点站" width="120"></el-table-column>
      <el-table-column prop="startTime" label="出发时间" width="120"></el-table-column>
      <el-table-column prop="endTime" label="到达时间" width="120"></el-table-column>
      <el-table-column prop="carriage" label="车厢数" width="120"></el-table-column>
      <el-table-column prop="maxSpeed" label="最大时速" width="120"></el-table-column>
      <el-table-column prop="seatCount" label="座位数" width="120"></el-table-column>
      <el-table-column prop="mileage" label="里程" width="120"></el-table-column>
      <el-table-column prop="persitePrice" label="区间价格" width="120"></el-table-column>
      <el-table-column prop="totalMin" label="总时长" width="120"></el-table-column>
      <el-table-column prop="totalDay" label="总天数" width="120"></el-table-column>
      <el-table-column prop="trainStatus" label="火车状态" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.trainStatus === 0?'删除':'恢复'}}</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "Train",
  data() {
    return {
      formInline: {
        trainId: "",
        trainStatus: "正常"
      },
      rules: {
        trainId: [{ required: true, message: "请输入火车Id" }],
        trainStatus: [{ required: true, message: "请选择火车状态" }]
      },
      tableData: [],
      total: 0
    };
  },
  mounted(){
    this.getTrainList()
  },
  methods: {
    create(){
      this.$router.push('/trainAdd')
    },
    handleClick(row){
      if (row.trainStatus === 0){
        this.$confirm('此操作将删除该列车, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.changeStatus('delete', row.trainId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      } else {
        this.$confirm('此操作将恢复该列车, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.changeStatus('recover', row.trainId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消恢复'
          });
        });
      }
    },
    async changeStatus(option, id){
      const res = await this.$http.get(`/admin/train/${option}/${id}`);
      if (res.data.code === 0){
        this.$message.success(res.data.msg);
        this.getTrainList()
      }
    },
    async getTrainList(){
      const res = await this.$http.get('/admin/train/list');
      if(res.data.code === 0){
        this.tableData = res.data.data.trainsList;
      }
    },
    async onStatusChange() {
      const res = await this.$http.get(
        `/admin/train/findByStatus?trainStatus=${this.formInline.trainStatus}`
      );
      if (res.data.code === 0) {
        window.console.log(res.data);
        this.tableData = res.data.data.trainsList;
        this.total = res.data.data.total;
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$http
            .get(`/admin/train/find/${this.formInline.trainId}`)
            .then(res => {
              if (res.status === 200 && res.data.code === 0) {
                this.tableData = res.data.data;
              }
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
